<template>
  <div class="searchList banner">
    <!-- 输入框 -->
    <div class="searchList-input">
      <el-input
        placeholder="请输入关键词搜索"
        prefix-icon="el-icon-search"
        v-model="input"
        @keyup.enter.native="handleClick(activeName,input)"
        clearable
      >
        <el-button slot="append" @click="handleClick(activeName,input)">搜索</el-button>
      </el-input>
    </div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick(activeName,input)"
      class="searchList-tabs"
    >
      <el-tab-pane :label="'文章(' + postMes.length + ')'" name="first">
        <el-empty description="描述文字" v-if="postMes.length == 0"></el-empty>
        <div v-else class="searchList_tabPane">
          <div  v-for="pItem in postMes" :key="pItem.pId" @click.stop="toDetails(pItem)" class="searchList_tab_item">
          <div class="searchList_tab_items">
            <img :src="pItem.pImg" alt="" class="searchList_tab_item_pImg"/>
            <div class="searchList_tab_item_mes">
              <!-- 查看数 -->
              <div class="">
                <!-- 图标 -->
                <i class="iconfont icon-chakan deepIcon"></i>
                <!-- 数量 -->
                <span>{{ pItem.viewNums }}</span>
              </div>
              <!-- 回复数 -->
              <div>
                <!-- 图标 -->
                <i class="iconfont icon-xinxi deepIcon"></i>
                <!-- 数量 -->
                <span>{{ pItem.replyNums }}</span>
              </div>
            </div>
          </div>
          <p class="searchList_tab_titleName">{{pItem.titleName}}</p>
          <div class="searchList_tab_bottom">
            <h4>{{pItem.username}}</h4>
            <i class="iconfont icon-dian1"></i>
            <!-- <span>{{ common.changeTimeFormat(pItem.pTime) }}</span> -->
            <span>{{ pItem.pTime }}</span>
          </div>
        </div>
        </div>

      </el-tab-pane>
      <el-tab-pane :label="'用户(' + userMes.length + ')'" name="second"
        >
        <el-empty description="描述文字" v-if="userMes.length == 0"></el-empty>
        <div class="userTab">
          <div v-for="uItem in userMes" :key="uItem.uId" class="userTabItem">
            <user-up :newUp="uItem"></user-up>
          </div>
        </div>

        </el-tab-pane
      >
      <!-- <el-tab-pane :label="'标签(' + 0 + ')'" name="third"
        >角色管理</el-tab-pane
      > -->
    </el-tabs>
  </div>
</template>
<script>
import userUp from './UserUp.vue'
export default {
  components: {
    userUp
  },
  data () {
    return {
      input: '',
      activeName: 'first',
      postMes: [],
      userMes: [],
      followBtn: '关注',
      isLoginUser: true,
      disabled: false,
      loginUser: {},
      flag: false
    }
  },
  created () {
    this.getFuzzyTitle(this.input)
  },
  methods: {
    // 根据登录token实现关注
    getuserInfo () {
      let params = {}
      params.token = this.cookies.getToken('X-Token')
      // console.log(params.token!=null)
      if (params.token != null) {
        this.$axios.getUserInfo(params).then(res => {
          console.log(res.data.uId)
          this.loginUser = res.data
          this.isFollow(this.newUp.uId, res.data.uId)
          if (res.data.uId == this.newUp.uId) {
            // console.log("是登录用户")
            this.isLoginUser = true
          } else {
            // console.log("不是登录用户")
            this.isLoginUser = false
          }
        })
      } else {
        this.isLoginUser = true
      }
    },
    // 取消关注
    handleCommand (followedId) {
      let params = {}
      params.followedId = followedId
      params.fansNum = this.newUp.fansNum
      params.uId = this.loginUser.uId
      console.log(params)
      this.$axios.cancelFollow(params).then(res => {
        console.log(res)
        this.$message({
          message: '取消关注成功',
          type: 'success'
        })
        this.reload()
      })
    },
    // 关注用户
    followUser (uId) {
      // 关注用户
      let params = {}
      console.log(uId)
      if (this.cookies.getToken('X-Token') == null) {
        this.$message({
          message: '要先登录才可以关注哦！',
          type: 'warning'
        })
      } else {
        if (this.isLoginUser) {
          // alert("true")
          this.$message({
            message: '警告哦，用户不能关注自己',
            type: 'warning'
          })
        } else {
          // alert("false")
          if (this.followBtn == '关注') {
            this.flag = true
            // 点击关注按钮，被关注用户粉丝数+1，登录用户关注用户信息加1
            params.followedId = uId
            params.fansNum = this.newUp.fansNum
            params.uId = this.loginUser.uId
            console.log(params)
            this.$axios.updateFollow(params).then(res => {
              console.log(res)
              this.followBtn = '已关注'
              this.disabled = res.data.isFollow
              this.userMes.fansNum = res.data.fansNum
            })
            setTimeout(() => {
              this.flag = false
            }, 1000)
            this.reload()
          } else {
            this.$message({
              message:
                '若要取消关注，可点击下拉菜单中的“取消关注”，不要频繁点击哦',
              type: 'warning'
            })
          }
        }
      }
    },
    toDetails (item) {
      console.log(item)
      let params = item
      console.log(params)
      this.$axios.updatePostView(params).then((res) => {
        console.log(res)
        let detail = JSON.stringify(res.data)
        this.$router.push({
          path: '/details',
          query: {
            detail
          } // 要传递的参数
        })
      })
    },
    handleClick (activeName, input) {
      console.log(activeName)
      if(activeName=='first'){
        this.getFuzzyTitle(input)
      }else if(activeName=='second'){
        this.getFuzzyNickname(input)
      }else if(activeName=='third'){
        console.log('三')
      }
    },
    getFuzzyTitle (input) {
      let params = {}
      params.titleName = input
      if(input!=''&&input!=null&&input!=' '){
        this.$axios.getFuzzyTitle(params).then(res => {
          console.log(res)
          this.postMes = res.data
        })
      }else{
        this.postMes = []
      }

    },
    getFuzzyNickname (input) {
      let params = {}
      params.nickname = input
      if(input!=''&&input!=null&&input!=' '){
        this.$axios.getFuzzyNickname(params).then(res => {
          console.log(res)
          this.userMes = res.data
        })
      }else{
        this.userMes = []
      }

    }
  }
}
</script>
<style scoped>
.searchList {
  margin-top: 30px;
}
.searchList-input {
  text-align: center;
}
.searchList-input > .el-input {
  width: 400px;
}
.searchList-tabs {
  margin: 20px 0;
}
.searchList_tabPane {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
}
.searchList_tab_item {
  width: 200px;
  display: flex;
  flex-direction: column;
  margin: 20px 10px;
}
.searchList_tab_items {
  position: relative;

}
.searchList_tab_item_mes {
  position: absolute;
  bottom: 4px;
  display: flex;
  justify-content: space-around;
  background-image: linear-gradient(#44444308,#444443);
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 0;
  border-radius: 0 0 10px 10px;
}
.searchList_tab_item_mes i {
  color: #fff;
}
.searchList_tab_item_pImg {
  width: 100%;
  height: 120px;
  border-radius: 10px;
}
.searchList_tab_titleName {
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /*作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient: vertical; /*设置伸缩盒子的子元素排列方式--从上到下垂直排列*/
  -webkit-line-clamp: 2; /*显示的行*/
}
.searchList_tab_bottom {
  display: flex;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.userTab {
  display: flex;

}
.userTabItem {
  width: 50%;
  display: flex;
  /* background-color: red; */
  margin: 10px;
}
.userTabItemImg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 10px;
}
.userTabItem_right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
